<template>
  <transition :name="transitionName">
    <div v-toBody="isBody" :class="classes" v-if="isHidden" v-show="value">
      <div class="wrap" :style="{width: wrapWD, marginTop: marginTop}">
        <slot name="header">
          <div class="header">
            {{title}}
            <Icon type="icon-close" class="close" @click="clickClose" />
          </div>
        </slot>
        <slot>
          <div class="content">
            content
          </div>
        </slot>
        <slot name="footer">
          <div class="footer">
            <Button type="primary" @click="confirm" style="margin-right: 20px;">确定</Button>
            <Button @click="cancel">取消</Button>
          </div>
        </slot>
      </div>
    </div>
    <div v-toBody="isBody" :class="classes" v-if="!isHidden && value">
      <div class="wrap" :style="{width: wrapWD, marginTop: marginTop}">
        <slot name="header">
          <div class="header">
            {{title}}
            <Icon type="icon-close" class="close" @click="clickClose" />
          </div>
        </slot>
        <slot>
          <div class="content">
            content
          </div>
        </slot>
        <slot name="footer">
          <div class="footer">
            <Button type="primary" @click="confirm" style="margin-right: 20px;">确定</Button>
            <Button @click="cancel">取消</Button>
          </div>
        </slot>
      </div>
    </div>
  </transition>
</template>

<script>
import Button from '../../button'
import Icon from '../../icon'
import size from '../../../mixins/size'
export default {
  name: 'Model',
  mixins: [size],
  components: {
    Button,
    Icon
  },
  props: {
    value: {
      type: Boolean
    },
    showMask: {
      type: Boolean,
      default: true
    },
    disableScroll: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: 450
    },
    top: {
      type: [String, Number],
      default: 0
    },
    title: {
      type: [String, Number],
      default: 'Model'
    },
    isBody: {
      type: Boolean,
      default: false
    },
    isHidden: {
      type: Boolean,
      default: false
    }
  },
  directives: {
    toBody: {
      inserted: (el, binding) => {
        if (binding.value) {
          document.body.appendChild(el)
        }
      }
    }
  },
  data () {
    return {
      transitionName: 'ease'
    }
  },
  computed: {
    classes () {
      return [
        'sh-model',
        {
          'sh-model-bg': this.showMask,
          [`sh-model-${this.sizes}`]: !!this.sizes
        }
      ]
    },
    wrapWD () {
      return typeof this.width === 'string'
        ? this.width
        : this.width + 'px'
    },
    marginTop () {
      return typeof this.top === 'string'
        ? this.top
        : this.top + 'px'
    }
  },
  watch: {
    value (val) {
      this.transitionName = val
        ? 'ease'
        : 'fade'
      this.$emit('on-visible-change', val)
    }
  },
  mounted () {
    if (this.value) {
      this.transitionName = 'ease'
      this.$emit('on-visible-change', true)
    }
    if (this.disableScroll) {
      this.bindEvent()
    }
  },
  destroyed () {
    if (this.disableScroll) {
      this.unbindEvent()
    }
  },
  methods: {
    disDefaultEvent (e) {
      e.preventDefault()
    },
    disKeyboardEvent (e) {
      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
        e.preventDefault()
      }
    },
    bindEvent () {
      window.addEventListener('wheel', this.disDefaultEvent, { passive: false })
      window.addEventListener('keydown', this.disKeyboardEvent)
    },
    unbindEvent () {
      window.removeEventListener('wheel', this.disDefaultEvent)
      window.removeEventListener('keydown', this.disKeyboardEvent)
    },
    clickClose () {
      this.transitionName = 'fade'
      this.$emit('input', false)
      this.$emit('on-close')
      // 点击x号同时出发取消事件
      this.$emit('on-cal')
    },
    cancel () {
      this.transitionName = 'fade'
      this.$emit('input', false)
      this.$emit('on-cal')
    },
    confirm () {
      this.transitionName = 'fade'
      this.$emit('input', false)
      this.$emit('on-ok')
    }
  }
}
</script>
